<template>
    <view>
		<view>
		  <cmd-nav-bar :fixed="false" back  background-color="linear-gradient(to right, rgb(17, 153, 142), rgb(56, 239, 125))" title="我的"  font-color="#fff" ></cmd-nav-bar>
		</view>
			
		
		
        <view class="uni-padding-wrap">
            <view class="page-section swiper">
                <view class="page-section-spacing">
                    <swiper class="swiper" @change="changefun"  @click="swiperClick" @animationfinish="animationfinishfun" :current="current" :circular="false" :vertical="true">
						<block v-if="PayVideo">
							<swiper-item v-for="(item,index) in PayVideo" :key="index">
								<view class="swiper-item uni-bg-black">
									<video
										:custom-cache="false" 
										:show-fullscreen-btn="false"
										:controls="true"
										:show-center-play-btn="false"
										enable-play-gesture
										:initial-time="0"
										class="video" 
										:id="'id'+index" 
										:src="item.videoUrl"
										:enable-progress-gesture="false"
										:poster="item.coverImg"
										preload="auto"
										v-if="index == current"
									>
									</video> 
								</view>
							</swiper-item>
						</block>
                    </swiper>
                </view>
            </view>
        </view>
        <view>
            <view class="left">
                <cover-view class="left_box">
					
                  <cover-view class="ke_context ">{{title}}</cover-view>
				 <cover-view class="ke_context ">{{description}}
				 <text  class="ml-2" @click="chooseList">选集 > </text>
				 </cover-view>
				<!-- 	 <cover-view class="auto">
						<cover-view>视频总时长：{{duration || 0}}</cover-view>
					</cover-view> -->
                </cover-view>
            </view>
			
			<view @click="tapApp" class="video-icon-btn" v-if="!vStatusIshow">
				<image v-if="!vStatus" src="/static/vzt.png"></image>
				<image v-if="vStatus" src="/static/vbf.png"></image>
			</view>
			
			<view class="xuan" v-if="xuanFlag">
				<view class="d-flex j-sb">
					<view class="ml-2 mt-1">
						<text class="font-weight">万古第一</text><text class="ml-2 font-weight-100">更新到第15集</text>
					</view>
					<view class="xuanxl mr-2 mt-1" @click="xuanClosed">
						<image src="../../static/xuanxl.png"></image>
					</view>
				</view>
				<view class="d-flex flex-wrap ">
					<view class="xuan-list span-6 bg-white mt-2 ml-2">
						<view class="xuan-img text-center">
							<image src="../../static/yhdsl/cover.jpg"></image> 
						</view>
						<text class="xuan-tit">第一季</text>
					</view>
					<view class="xuan-list span-6 bg-white mt-2 ml-2">
						<view class="xuan-img text-center">
							<image src="../../static/yhdsl/cover.jpg"></image> 
						</view>
						<text class="xuan-tit">第一季</text>
					</view>
					<view class="xuan-list span-6 bg-white mt-2 ml-2">
						<view class="xuan-img text-center">
							<image src="../../static/yhdsl/cover.jpg"></image> 
						</view>
						<text class="xuan-tit">第一季</text>
					</view>
					<view class="xuan-list span-6 bg-white mt-2 ml-2">
						<view class="xuan-img text-center">
							<image src="../../static/yhdsl/cover.jpg"></image> 
						</view>
						<text class="xuan-tit">第一季</text>
					</view>
					 
				</view>
			</view>
			
        </view>
    </view>
</template>
 
<script>
 import { listTvGatherManageByMainId ,addViewRecord } from "@/common/api/theater.js"
    export default {
        data() {
            return {
                PayVideo: [],
				videoData: {},
				videoList:[
			{
				"id": "1676620596258381826",
				"createBy": "admin",
				"createTime": "2023-07-05 23:54:35",
				"coverImg": "https://short-video-xz.oss-cn-beijing.aliyuncs.com/temp/113221714062_1688572437675.jpg",
				"videoUrl": "https://short-video-xz.oss-cn-beijing.aliyuncs.com/temp/355K_1688572458592.mp4",
				"level": 1,
				"classId": "1674812768310198274",
				"exchangeIntegral": 0
			},
			{
				"id": "1676620753980989442",
				"createBy": "admin",
				"createTime": "2023-07-05 23:55:13",
				"coverImg": "https://short-video-xz.oss-cn-beijing.aliyuncs.com/temp/215b586286_1688572507831.jpeg",
				"videoUrl": "https://short-video-xz.oss-cn-beijing.aliyuncs.com/temp/fda0d2f9e2d958ea9faac4b08de923d7_1688572493565.mp4",
				"level": 2,
				"classId": "1674812768310198274",
				"exchangeIntegral": 0
			},
			{
				"id": "1676621869485498370",
				"createBy": "admin",
				"createTime": "2023-07-05 23:59:38",
				"coverImg": "https://short-video-xz.oss-cn-beijing.aliyuncs.com/temp/bg16_1688572712872.jpg",
				"videoUrl": "https://short-video-xz.oss-cn-beijing.aliyuncs.com/temp/V-115507-CA837843_1688572755510.mp4",
				"level": 3,
				"classId": "1674812768310198274",
				"exchangeIntegral": 0
			}
		],
				title:"",
				description: '',
				current: "",
				index_: 0,
				videoContext: '',
				duration: '',//总视频时长
				vStatus:false,
				vStatusIshow:false,
				classId:"",
				xuanFlag:false,
				Height: 0,
				top: 0,
				Width: 0,
				form:{
					//userid:uni.getStorageSync("userInfo").id,
					tvId:"",
					episodes:"",
				}
            }
        },
        computed: {
        },
		onLoad(options) {
			/*
			 获取小程序顶部胶囊位置及宽高
			 */
			let that = this;
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.Height = menuButtonInfo.height;
			this.top = menuButtonInfo.top;
			uni.getSystemInfo({
				success: function(res) {
					that.Width = res.windowWidth - menuButtonInfo.width;
				}
			});
			this.videoData = {
				id:options.classId,
				desc:"descdesc",
				title: options.title,
			};
			this.classId = options.classId; 
			this.getVideoInfo(options.classId);
		},
		onShow() {
			this.getVideoList()
		},		
        methods: {
			addView(){
				this.form.tvId = this.classId
				addViewRecord(this.form).then(res => {
				})	 
			},
			getVideoList(){
				let that = this;
			  listTvGatherManageByMainId({
					pageNo: 1,
					pageSize: 10,
					classId:this.classId
				}).then(res => {
				  that.PayVideo = res.result.records //上下滑动总数据 
				  that.current = 0  //当前播放
				  console.log(res.result.records[0].id);
				});	 
			},
			getVideoInfo(classId){
				let that = this;
				 this.id = classId
				uni.setNavigationBarTitle({
					title:"this.videoData.title"
				})
				this.title = this.videoData.title
				this.description = this.videoData.desc
				
				this.PayVideo = this.videoList //上下滑动总数据 
				 this.current = this.PayVideo.findIndex((items) => { 
					 console.log("++++++++++++")
					 console.log(items.id)
					 console.log(this.videoList[0].id)
					  
					 // that.form.id = items.id
					 that.form.episodes = items.level
					return items.id === this.videoList[0].id
				})  
				that.duration = 100
				// 自动播放当前视频 
				console.log("自动播放当前视频")
				console.log(that.current)
				this.$nextTick(function() {
					let videoContext = uni.createVideoContext('id' + that.current)
					console.log("index----",videoContext) 
					setTimeout(() => {
					      videoContext.play()
					}, 500)
				})
				that.addView();
				
				/* let data = {
					id
				}
				this.yrApi.request('Zuopin/getVideoById', 'POST', data).then(res=>{
					if(res.data.code==0){
						this.videoData = res.data.data;
						this.id = res.data.data.id
						uni.setNavigationBarTitle({
							title:this.videoData.title
						})
						this.description = this.videoData.desc
						this.PayVideo = this.videoList //上下滑动总数据
						this.current = this.PayVideo.findIndex((item) => {
							return item.id === res.data.data.id
						})
						this.duration = res.data.data.videoTime
						// 自动播放当前视频
						this.$nextTick(function() {
							let videoContext = uni.createVideoContext('id' + this.current)
							console.log("index----",videoContext)
							setTimeout(() => {
							      videoContext.play()
							}, 500)
						})
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
						// setTimeout(()=>{
						// 	uni.redirectTo({
						// 		url:'/pages/index/index?index=2'
						// 	})
						// },1500)
					}
				}) */
			},
			// current改变时会触发change 事件
            changefun(e) {
                let current = e.detail.current
				uni.setNavigationBarTitle({
					title: this.PayVideo[current].title
				})
				if(this.PayVideo[current].desc) {
					this.description = this.PayVideo[current].desc
				}
				this.duration = this.PayVideo[current].videoTime
				 
				let videoContext = uni.createVideoContext('id' + this.current)
				videoContext.pause()  //停止播放
				uni.createVideoContext('id' + current).play()
				this.current = current
            },
			// 动画结束时触发
			animationfinishfun(e) { 
				let that = this;
				let current = e.detail.current
				let videoContext1 = uni.createVideoContext('id' + this.current)
				videoContext1.pause() //停止播放非当前视频
				let videoContext2 = uni.createVideoContext('id' + current)
				console.log("====动画结束时触发=====");
				console.log(this.current);
				console.log(current);
				videoContext2.play() //开始播放当前视频
				this.current = current //保存当前下标 播放下一个视频时停止上一个视频 防止声音重复 	
				//添加记录 
				this.PayVideo.forEach(function(item, index) {
				     if(index == that.current){
						// that.form.id = item.id
						that.form.episodes = item.level
					 }
				});
				this.addView()
			},
			tapApp(){
				console.log(this.PayVideo)
				console.log(this.current)
				this.vStatus = this.vStatus?false:true; 
				if(this.vStatus){
					let videoContext = uni.createVideoContext('id' + this.current)
					videoContext.pause() //停止播放
				}else{
					let videoContext = uni.createVideoContext('id' + this.current)
					videoContext.play() //播放
				} 
			},
			swiperClick(){
				let that = this;
				this.vStatusIshow = true
				setTimeout(function(){
					that.vStatusIshow = false
				},4000);
				console.log(23)
			},
			chooseList(){
				console.log("chooseListchooseList")
				this.xuanFlag = true
			},
			xuanClosed(){
				this.xuanFlag = false
			},
        },
    }
	
</script>
 
<style scoped lang="scss">
	.xuan    {position: fixed;
    z-index: 99;
    background: #eee;width: 100%;
    bottom: 3px;}
	.xuan-list{position: relative;overflow: hidden;border-radius: 5px;}
	.xuan-img{width: 220rpx;height: 320rpx;}
	.xuan-tit{position: absolute;bottom: 0px;text-align: center;
		background: #000;width: 100%;opacity: 0.8;color: #fff}
	.ml-2 { margin-left: 18upx;}
	.xuanxl image{width: 40rpx;height: 50rpx;}
	
	
	
    .circle {
        background: rgba(34, 34, 34, 0.4);
        border-radius: 50%;
        z-index: 2;
        height: 70px;
        width: 70px;
        position: fixed;
        top: 0;
        bottom: 441rpx;
        left: 31rpx;
 
        margin: auto;
 
        .red {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            z-index: 3;
            height: 35px;
            width: 35px;
        }
    }
 
    .swiper {
        height: 100vh;
 
        .swiper-item {
            height: 100vh;
            position: relative;
        }
 
        .uni-bg-black {
            background: black;
        }
    }
 
    .video {
        width: 100%;
        height: 98vh;
        position: relative;
    }
 
    .left_box {
        position: fixed;
        bottom: 90rpx;
        left: 24rpx;
        .ke_context {
			overflow-y: scroll;
			max-height: 300rpx;
			white-space:pre-wrap;
            width: 700rpx;
            font-size: 30rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
			white-space:pre-wrap;
            text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
        }
		
		.height {
			margin-bottom: 40rpx;
		}
 
        .ren {
            margin: 20rpx 0;
            font-size: 36rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: rgba(255, 255, 255, 1);
            text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
        }
 
        .auto {
            display: flex;
            align-items: center;
            width: 310rpx;
            height: 60rpx;
            margin-top: 24rpx;
            opacity: 1;
            border-radius: 8rpx;
            padding-left: 10rpx;
 
            cover-view {
                font-size: 26rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: rgba(255, 255, 255, 1);
                line-height: 90px;
                text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
            }
 
            cover-image {
                margin-right: 10rpx;
                height: 28rpx;
                width: 26rpx;
            }
        }
 
        .ke {
            display: flex;
            align-items: center;
            width: 310rpx;
            height: 60rpx;
            background: rgba(0, 0, 0, 0.3);
            opacity: 1;
            border-radius: 8rpx;
            padding-left: 10rpx;
 
            cover-view {
                font-size: 26rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: rgba(255, 255, 255, 1);
                line-height: 90px;
                text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
            }
 
            cover-image {
                margin-right: 10rpx;
                height: 40rpx;
                width: 40rpx;
            }
        }
    }
 
    .H_T {
        z-index: 2;
        width: 100%;
        display: flex;
        box-sizing: border-box;
        position: absolute;
        padding: 0 30rpx;
        background: transparent;
        justify-content: space-between;
 
        .back {
            height: 48rpx;
            width: 48rpx;
        }
 
        .search {
            height: 48rpx;
            width: 48rpx;
        }
    }
 
    .right_box {
        width: 100rpx;
        position: absolute;
        z-index: 2;
        bottom: 60rpx;
        right: 12rpx;
        display: flex;
        flex-direction: column;
 
        .top1 {
            position: relative;
            height: 124rpx;
 
            .avatar_img {
                width: 98rpx;
                height: 98rpx;
                border-radius: 50%;
            }
 
            .add_img {
                position: absolute;
                z-index: 99;
                width: 48rpx;
                height: 48rpx;
                bottom: 10rpx;
                left: 0;
                right: 0;
                margin: 0 auto;
            }
        }
 
        .top2 {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 37rpx;
 
            .t_img {
                height: 72rpx;
                width: 72rpx;
                margin-bottom: 10rpx;
            }
            
            .font_t {
                font-size: 26rpx;
                font-family: SF Pro Text;
                font-weight: 500;
                color: rgba(255, 255, 255, 1);
 
                text-shadow: 0px 1rpx 1rpx rgba(0, 0, 0, 0.4);
                text-align: center;
            }
        }
 
    }
	.video-icon-btn{text-align: center;
    position: relative;
    z-index: 9;width: 120rpx;margin: 0 auto;
    bottom: 145px;}
	.video-icon-btn image{width: 90rpx;height: 90rpx;}
</style>